<template>
	<div class="sbDetail">
		<div class="inviteIndexItems">
			<div class="inviteIndexItems_left">
				设备编号
			</div>
			<div class="inviteIndexItems_right">
				<input type="text" value="" v-model='from.number' placeholder="请输入" />
			</div>
		</div>
		<div class="inviteIndexItems">
			<div class="inviteIndexItems_left">
				设备类型
			</div>
			<!-- <input type="text" value="" v-model='from.name' placeholder="请输入" /> -->
			<div class="inviteIndexItems_right" @click="showSex = true; hideKeyboard()">
				<!-- <input type="text" value="" placeholder="请输入性别" /> -->
				<!-- {{from.type?"请选择设备类型":from.type}}111 -->
				<u--input v-model="sbType" disabled disabledColor="#ffffff" placeholder="请选择设备类型" border="none">
				</u--input>
				<u-icon slot="right" name="arrow-right" color='#c0c4cc'></u-icon>
			</div>
		</div>
		<div class="inviteIndexItems">
			<div class="inviteIndexItems_left">
				设备价格
			</div>
			<div class="inviteIndexItems_right">
				<input type="number" value="" v-model='from.price' :disabled="isD" placeholder="请输入" />
			</div>
		</div>
		<div class="inviteIndexItems">
			<div class="inviteIndexItems_left">
				设备型号
			</div>
			<div class="inviteIndexItems_right">
				<input type="text" value="" v-model='from.model' placeholder="请输入" />
			</div>
		</div>
		<div class="inviteIndexItems">
			<div class="inviteIndexItems_left">
				设备位置
			</div>
			<div class="inviteIndexItems_right" @click='froolShow = true'>
				<input type="text" value="" v-model='from.address' disabled placeholder="请输入" />
			</div>
		</div>
		<div class="inviteIndexItems">
			<div class="inviteIndexItems_left">
				置购时间
			</div>
			<div class="inviteIndexItems_right" @click='tiemEvent'>
				{{from.time?from.time:'请选择时间'}}
				<!-- <input type="text" value="" v-model='from.model' placeholder="请输入" /> -->
			</div>
		</div>

		<div class="inviteUpdate">
			上传照片 </div>
		<div class="inviteUpdate_img">
			<div class="inviteUpdate_left" @click='UpImg(1)'>
				<image :src="sbImage" mode="" v-if="sbImage"></image>
				<image src="https://wx.sjcmhz.com/static/image/upload.png" mode="" v-else></image>
			</div>

		</div>

		<span class="inviteUpdate_img_yu" @click='yuImg' v-if="sbImage" >预览图片</span>

		<!--  -->
		<frool v-if="froolShow" :froolShow='froolShow' @confirm='FroolConfirm' @cancel='froolShow=false'></frool>
		<!-- btn -->
		<!-- 提交 -->
		<div class="inviteIndexItems_btn sbDetailbtn" @click='inviteSureEvent()'
			v-if="equipment_id != undefined && equipment_id != 'undefined'">
			提交
		</div>
		<!-- 提交 -->
		<div class="inviteIndexItems_btn sbDetailbtn" @click='inviteSureEventAdd()' v-else>
			提交
		</div>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择设备类型" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<u-calendar :show="show" :mode="mode" @confirm="confirm" @close='show=false'></u-calendar>
	</div>
</template>

<script>
	import frool from '@/pages/server/components/frool.vue'
	export default {
		components: {
			frool
		},
		data() {
			return {
				froolShow: false,
				from: {
					image: "",
					type:''
				},
				showSex: false,
				show: false,
				mode: 'single',
				equipment_id: '',
				isD: false,
				sbImage:'',
				sbType:"",
				// 电脑、屏幕、声卡、麦克风、灯具、无线耳机、手机、杂项
				actions: [{
						name: '电脑',
					},
					{
						name: '屏幕',
					}, {
						name: '声卡',
					},
					{
						name: '麦克风',
					}, {
						name: '灯具',
					},
					{
						name: '无线耳机',
					}, {
						name: '相机',
					},
					{
						name: '采集卡',
					},
					{
						name: '杂项',
					}

				],
			}
		},
		onLoad(opt) {
			this.equipment_id = opt.id || undefined
			if (this.equipment_id != undefined && this.equipment_id != 'undefined') {
				this.isD = true
			}
			console.log("equipment_id", this.equipment_id)
			this.getRoomEdits()
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.$set(this.from, 'time', e[0])
				// this.time = e[0]
				this.show = !this.show
			},
			tiemEvent() {
				this.show = !this.show
			},
			async getRoomEdits() {
				const {
					data
				} = await this.$request(this.$Api.roomEdits, {
					equipment_id: this.equipment_id
				}, "POST")
				if (data.code !== 0) return
				if (data.data) {
					this.from = data.data
					this.sbImage = data.data.image
					this.sbType = data.data.type
				}

			},
			// 上传图片
			UpImg(index) {
				var that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.thumbnail = tempFilePaths
						that.UpList(index, that.thumbnail)
					}
				});
			},
			UpList(index, file) {
				var that = this
				that.$utils.UpdataImg(file, (res) => {
					that.$set(that.from, 'image', res[0])
					that.sbImage =  res[0]
					console.log("resssssss", that.from.image)
				})
			},
			hideKeyboard() {

			},
			sexSelect(e) {
				this.$set(this.from, 'type', e.name)
				this.sbType =e.name
				// this.$forceUpdate()
				console.log("e.name111", e.name,this.from )
					
			},
			// 新增设备
			async inviteSureEvent() {
				const {
					data
				} = await this.$request(this.$Api.roomEdit, this.from, "POST")
				if (data.code !== 0) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				uni.navigateBack()
			},

			async inviteSureEventAdd() {
				const {
					data
				} = await this.$request(this.$Api.roomAdd, this.from, "POST")
				if (data.code !== 0) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				uni.navigateBack()
			},
			async FroolConfirm(e) {
				console.log('FroolConfirmFroolConfirm', e)
				// room_name:this.room_name,floor_name:this.floor_name,storey_name:this.storey_name
				this.from.address = e.floor_name + ' ' + e.storey_name + " " + e.room_name
				this.from.room_id = e.room_id
				this.from.storey_id = e.storey_id
				this.from.floor_id = e.floor_id
				// var params = {
				// 	anchor_id: this.anchor_id,
				// 	room_id: e.room_id,
				// 	storey_id: e.storey_id,
				// 	floor_id: e.floor_id,
				// }
			},
			yuImg() {
				uni.previewImage({
					current: 0,
					urls: [this.from.image]
				})
			}
		},
	}
</script>

<style lang="less">
	.sbDetail {
		padding: 24rpx 0;
	}

	.sbDetailbtn {
		position: fixed;
		bottom: 0;
		background: #2D60FF;

	}

	.inviteUpdate {
		font-size: 30rpx;
		line-height: 94rpx;
		padding: 0 44rpx;


	}

	.inviteUpdate_img {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 22rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
	}

	.inviteUpdate_img_yu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 22rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;
		color: #2D60FF;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.inviteUpdate_left,
	.inviteUpdate_right {
		width: 294rpx;
		height: 224rpx;

		// float:left;
		image {
			width: 100%;
			height: 100%;
			background: #f5f5f5;

		}
	}

	.inviteIndexItems_title {
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 44rpx;
		font-size: 30rpx;

	}
</style>
